import React, {Component,} from 'react'
import {withRouter} from 'react-router-dom'
import AdminModel from "../../model/admin";
import {GlobalContext} from "../../context";
import Info from "../../service/info";
import Admin from "../../layout/Admin";
import {Button, Modal, PageHeader, Popconfirm, Table, Form, Input,} from "antd";

class AdminContainer extends Component {

    constructor(props) {
        super(props)
        this.model = new AdminModel()
        this.state = {
            list: [],
            p: 0,
            offset: 0,
            limit: 15,
            modal: {
                add: false,
            },
            addForm: {
                username: '',
                password: '',
            }
        }
    }

    static contextType = GlobalContext

    componentDidMount() {
        if (this.check()) {
            Info.success('欢迎你 超级管理员')
            this.get()
        } else {
            Info.warning('你没有超级管理员权限')
            this.props.history.goBack()
        }
    }

    check = () => {
        const perm = this.context.auth.perm
        return parseInt(perm) === 1
    }

    get = () => {
        // this.get
        this.model
            .get({
                offset: this.state.offset,
                limit: this.state.limit,
            })
            .then(resp => {
                const list = resp.data.data
                this.setState({
                    list,
                })
            })
    }

    delete = (user) => {
        console.log(user)
        const id = user.Id
        this.model
            .delete({id,})
            .then((res) => {
                if (res.data.ok === 1) Info.success('删除成功')
            })
            .then(() => {
                this.get()
            })
    }

    add = (values) => {
        values.perm = 2
        this.model
            .add(values)
            .then((res) => {
                if (res.data.ok === 1) Info.success('添加成功')
                this.modalControl('add', false)
            })
            .then(() => {
                this.get()
            })
    }

    modalControl = (key, value) => {
        this.setState({
            modal: {
                ...this.state.modal,
                [key]: value,
            }

        })
    }

    render() {

        const header = <div style={{background: '#fff'}}>
            <PageHeader title='管理员管理'/>
        </div>


        // id	                int  //用户id,唯一
        // username	string //用户名
        // password         string //密码
        // perm                int //权限
        // token2             string //登陆token，有效期2小时
        // token6             string //用于刷新登陆token，有效期6小时
        // refreshtime2    int  //token2的刷新时间
        // refreshtime2    int  //token6的刷新时间

        const defaultRender = (text) => <span>{text}</span>
        const PermRender = (text) => <span>{text !== 1 ? '普通管理员' : '超级管理员'}</span>
        const columns = [
            {
                title: 'Id',
                dataIndex: 'Id',
                render: defaultRender
            },
            {
                title: '管理员',
                dataIndex: 'UserName',
                render: defaultRender
            },
            {
                title: '管理员',
                dataIndex: 'Perm',
                render: PermRender
            },
            {
                title: '操作',
                render: (text, record) => {
                    return <div>
                        <a>
                            <Popconfirm
                                title="确定删除?"
                                onConfirm={(e) => this.delete(record)}
                            >
                                <span>删除</span>
                            </Popconfirm >
                        </a>
                    </div>
                }
            }
        ]

        const table = <div className='list-container'>

            <div style={{marginBottom: '16px',}}>
                <Button
                    onClick={() => this.modalControl('add', true)}
                >
                    添加管理员
                </Button>
            </div>

            <Table
                dataSource={this.state.list}
                columns={columns}
                rowKey={(record, index) => index}
                pagination={false}
            />
        </div>

        const layout = {
            labelCol: { span: 8 },
            wrapperCol: { span: 16 },
        }

        const tailLayout = {
            wrapperCol: { offset: 8, span: 16 },
        }

        const addModal = <Modal
            visible={this.state.modal.add}
            title={'添加管理员'}
            maskClosable={true}
            footer={null}
            onCancel={() => this.modalControl('add', false,)}
        >

            <Form
                {...layout}
                ref={el => this.addForm = el}
                initialValues={this.state.addForm}
                onFinish={this.add}
            >
                <Form.Item
                    label="管理员名称"
                    name="username"
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="管理员密码"
                    name="password"
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item
                    {...tailLayout}
                >

                    <Button
                        onClick={() => this.modalControl('add', false)}
                        style={{marginRight: '8px',}}
                    >
                        取消
                    </Button>

                    <Button
                        type="primary"
                        htmlType="submit"
                    >
                        添加
                    </Button>

                </Form.Item>
            </Form>

        </Modal>

        return <>
            {addModal}
            <Admin>
                {header}
                {table}
            </Admin>
        </>
    }

}

export default withRouter(AdminContainer)
